<template>
  <div>
    <div class="container">
      <div class="left">
        <div class="top">
          <div class="top-item">
            <div class="title">
              <div>合作客户</div>
              <div>
                环比：
                <el-select
                  v-model="chain"
                  placeholder="请选择"
                  filterable
                  style="width: 100px"
                  size="small"
                  @change="cooperativeClientsSelect"
                >
                  <el-option
                    v-for="(item, index) in this.selectOption1"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="info-list-one">
              <div
                class="info-item"
                v-for="(item, index) in cooperativeClients"
                :key="index"
              >
                <div class="info-item-left">
                  <div class="item-title">
                    <span class="icon"></span>
                    <span>{{ item.type }}</span>
                  </div>
                  <div class="item-num">{{ item.number }}</div>
                </div>
                <div class="info-item-right">
                  <img
                    v-if="item.change > 0"
                    src="@/assets/kmerit/icons/top.png"
                  />
                  <img v-else src="@/assets/kmerit/icons/bottom.png" />
                  <span v-if="item.change > 0">上升</span>
                  <span v-else>下降</span>
                  <span class="num"> {{ item.proportion }}% </span>
                </div>
              </div>
            </div>
          </div>
          <div class="top-item">
            <div class="title">
              <div>我的客户</div>
              <div>
                环比：
                <el-select
                  v-model="chain2"
                  placeholder="请选择"
                  filterable
                  style="width: 100px"
                  size="small"
                  @change="cooperativeClientsSelect2"
                >
                  <el-option
                    v-for="(item, index) in this.selectOption1"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="info-list-one">
              <div class="info-item">
                <div class="info-item-left">
                  <div class="item-title">
                    <span class="icon"></span>
                    <span>客户总量</span>
                  </div>
                  <div class="item-num">
                    {{ cooperativeClients2.customerCountProportion }}
                  </div>
                </div>
                <div class="info-item-right">
                  <img
                    v-if="cooperativeClients2.customerCountProportion > 0"
                    src="@/assets/kmerit/icons/top.png"
                  />
                  <img v-else src="@/assets/kmerit/icons/bottom.png" />
                  <span v-if="cooperativeClients2.customerCountProportion > 0"
                    >上升</span
                  >
                  <span v-else>下降</span>
                  <span class="num">
                    {{ cooperativeClients2.customerCountProportion }}%
                  </span>
                </div>
              </div>
              <div class="info-item">
                <div class="info-item-left">
                  <div class="item-title">
                    <span class="icon"></span>
                    <span>授信客户</span>
                  </div>
                  <div class="item-num">
                    {{ cooperativeClients2.creditCustomer }}
                  </div>
                </div>
                <div class="info-item-right">
                  <img
                    v-if="cooperativeClients2.creditCustomerProportion > 0"
                    src="@/assets/kmerit/icons/top.png"
                  />
                  <img v-else src="@/assets/kmerit/icons/bottom.png" />
                  <span v-if="cooperativeClients2.creditCustomerProportion > 0"
                    >上升</span
                  >
                  <span v-else>下降</span>
                  <span class="num">
                    {{ cooperativeClients2.creditCustomerProportion }}%
                  </span>
                </div>
              </div>
              <div class="info-item">
                <div class="info-item-left">
                  <div class="item-title">
                    <span class="icon"></span>
                    <span>活跃客户</span>
                  </div>
                  <div class="item-num">
                    {{ cooperativeClients2.activeCustomer }}
                  </div>
                </div>
                <div class="info-item-right">
                  <img
                    v-if="cooperativeClients2.activeCustomerProportion > 0"
                    src="@/assets/kmerit/icons/top.png"
                  />
                  <img v-else src="@/assets/kmerit/icons/bottom.png" />
                  <span v-if="cooperativeClients2.activeCustomerProportion > 0"
                    >上升</span
                  >
                  <span v-else>下降</span>
                  <span class="num">
                    {{ cooperativeClients2.activeCustomerProportion }}%
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="top-item">
            <div class="title">
              <div>经营数据</div>
            </div>
            <div class="info-list-three">
              <div class="info-item">
                <div class="item-date">
                  <el-radio-group
                    v-model="tyzcSelectDate"
                    style="margin-bottom: 30px"
                    @change="
                      (val) => {
                        tyChange(val, 'zc');
                      }
                    "
                    size="mini"
                  >
                    <el-radio-button label="1">本周</el-radio-button>
                    <el-radio-button label="2">本月</el-radio-button>
                    <el-radio-button label="3">本季度</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="item-title">
                  <img src="../../assets/kmerit/icons/icon1.png" />
                  <span>同业资产</span>
                </div>
                <div class="item-num">{{ tyzc }}</div>
              </div>
              <div class="info-item">
                <div class="item-date">
                  <el-radio-group
                    v-model="tyfzSelectDate"
                    @change="
                      (val) => {
                        tyChange(val, 'fz');
                      }
                    "
                    style="margin-bottom: 30px"
                    size="mini"
                  >
                    <el-radio-button label="1">本周</el-radio-button>
                    <el-radio-button label="2">本月</el-radio-button>
                    <el-radio-button label="3">本季度</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="item-title">
                  <img src="../../assets/kmerit/icons/icon2.png" />
                  <span>同业负债</span>
                </div>
                <div class="item-num">{{ tyfz }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="title">
            <div>客户综合贡献度排名</div>
          </div>
          <div class="ranking-list">
            <div class="ranking-list-content">
              <div
                class="ranking-list-item"
                v-for="(item, index) in customerComprehensiveContributionList"
                :key="index"
              >
                <span class="item-no" :class="{ 'item-no-one': index === 0 }">{{
                  index + 1
                }}</span>
                <span
                  class="item-name"
                  :class="{ 'item-name-one': index === 0 }"
                  >{{ item.customerShortName }}</span
                >
                <el-progress
                  :show-text="false"
                  :percentage="item.contributeOrder"
                  class="item-progress"
                  :class="{ 'item-progress-one': index === 0 }"
                ></el-progress>
                <span
                  class="item-num"
                  :class="{ 'item-num-one': index === 0 }"
                  >{{ item.contributeOrder }}</span
                >
              </div>
            </div>
            <!-- <div class="ranking-list-content">
              <div
                class="ranking-list-item"
                v-for="(item, index) in rangkingList2"
                :key="index"
              >
                <span class="item-no">{{ index + 6 }}</span>
                <span class="item-name">{{ item.name }}</span>
                <el-progress
                  :show-text="false"
                  :percentage="item.progress"
                  class="item-progress"
                ></el-progress>
                <span class="item-num">{{ item.num }}</span>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-item">
          <div class="title">
            <div>提醒事项</div>
            <div class="more" @click="goMore('提醒事项')">更多+</div>
          </div>
          <div class="info-list-one">
            <div
              class="info-item"
              v-for="(item, index) in remindList"
              :key="index"
            >
              <div class="info-item-left">
                <div class="item-title">
                  <span class="icon"></span>
                  <span>{{ item.type }}</span>
                </div>
                <div class="item-date">{{ item.updateDate }}</div>
              </div>
              <div class="info-item-right">
                {{ item.total }}
              </div>
            </div>
          </div>
        </div>
        <div class="right-item">
          <div class="title">
            <div>待办事项</div>
            <div class="more" @click="goMore('待办事项')">更多+</div>
          </div>
          <div class="info-list-two">
            <div
              class="info-item"
              v-for="(item, index) in todoList"
              :key="index"
            >
              <div class="item-title">
                <span class="icon"></span>
                <span>{{ item.type }}</span>
              </div>
              <div class="item-date">{{ item.updateDate }}</div>
            </div>
          </div>
        </div>
        <div class="right-item">
          <div class="title">
            <div>舆情信息</div>
            <div class="more" @click="goMore('舆情信息')">更多+</div>
          </div>
          <div class="info-list-two">
            <div
              class="info-item"
              v-for="(item, index) in publicOpinionInformationList"
              :key="index"
            >
              <div class="item-title">
                <span class="icon"></span>
                <span>{{ item.title }}</span>
              </div>
              <div class="item-date">{{ item.reportTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import icon1 from '@/assets/kmerit/icons/icon1.png';
import icon2 from '@/assets/kmerit/icons/icon2.png';
import {
  cooperateCustomer,
  myCustomer,
  operatingData,
  reminder,
  publicOpinionInformation,
  todo,
  customerComprehensiveContribution,
  reminderQuery,
} from '@/api/customerList/index.js';
export default {
  name: 'WorkspaceJsonIndex',

  data() {
    return {
      tyzcSelectDate: '1',
      tyfzSelectDate: '1',
      chain: 'WEEK',
      chain2: 'WEEK',
      line: '1',
      tyzc: '',
      tyfz: '',
      selectOption1: [
        {
          label: '周',
          value: 'WEEK',
        },
        {
          label: '月',
          value: 'MONTH',
        },
        {
          label: '季度',
          value: 'QUARTER',
        },
        {
          label: '年',
          value: 'YEAR',
        },
      ],
      selectOption2: [
        {
          label: '条线1',
          value: '1',
        },
        {
          label: '条线2',
          value: '2',
        },
      ],
      leftTopInfoList1: [
        {
          title: '市场机构数',
          num: 4428,
          change: 12,
        },
        {
          title: '授信客户数',
          num: 152,
          change: 10,
        },
        {
          title: '合作客户数',
          num: 988,
          change: -34,
        },
        {
          title: '活跃客户数',
          num: 209,
          change: -4,
        },
      ],
      leftTopInfoList2: [
        {
          title: '存量客户数',
          num: 34567,
        },
        {
          title: '潜力客户数',
          num: 234444,
        },
        {
          title: '潜在客户数',
          num: 9833338,
        },
      ],
      leftTopInfoList3: [
        {
          title: '同业资产',
          num: 8400000,
          selectDate: '1',
          icon: icon1,
        },
        {
          title: '同业负债',
          num: 120000,
          selectDate: '2',
          icon: icon2,
        },
      ],
      rangkingList1: [
        // 排名1-5
        {
          name: '建设银行',
          progress: 98,
          num: 345674,
        },
        {
          name: '建设银行',
          progress: 96,
          num: 345674,
        },
        {
          name: '建设银行',
          progress: 90,
          num: 345674,
        },
        {
          name: '建设银行',
          progress: 89,
          num: 345674,
        },
        {
          name: '建设银行',
          progress: 88,
          num: 345674,
        },
      ],
      rangkingList2: [
        // 排名6-10
        {
          name: '建设银行',
          progress: 80,
          num: 345674,
        },
        {
          name: '建设银行',
          progress: 70,
          num: 345674,
        },
        {
          name: '建设银行',
          progress: 60,
          num: 345674,
        },
        {
          name: '建设银行',
          progress: 50,
          num: 345674,
        },
        {
          name: '建设银行',
          progress: 40,
          num: 345674,
        },
      ],
      rightInfoList1: [
        {
          title: '提醒事项文字提醒事项文字提醒事项',
          num: 45,
          date: '20220202',
        },
        {
          title: '提醒事项文字提醒事项文字提醒事项',
          num: 23,
          date: '20220202',
        },
        {
          title: '提醒事项文字提醒事项文字提醒事项',
          num: 34,
          date: '20220202',
        },
      ],
      rightInfoList2: [
        {
          title: '提醒事项文字提醒事项文字提醒事项',
          num: 45,
          date: '20220202',
        },
        {
          title: '提醒事项文字提醒事项文字提醒事项',
          num: 23,
          date: '20220202',
        },
        {
          title: '提醒事项文字提醒事项文字提醒事项',
          num: 34,
          date: '20220202',
        },
      ],
      rightInfoList3: [
        {
          title: '提醒事项文字提醒事项文字提醒事项',
          num: 45,
          date: '20220202',
        },
        {
          title: '提醒事项文字提醒事项文字提醒事项',
          num: 23,
          date: '20220202',
        },
        {
          title: '提醒事项文字提醒事项文字提醒事项',
          num: 34,
          date: '20220202',
        },
      ],
      cooperativeClients: [],
      cooperativeClients2: [],
      operatingDataList: {},
      remindList: [],
      todoList: [],
      publicOpinionInformationList: [],
      customerComprehensiveContributionList: [],
    };
  },

  async created() {
    this.cooperateCustomerFn('WEEK');
    this.cooperativeClientsSelect2('WEEK');
    this.getOperatingData();
    this.remindFn();
    this.todoFn();
    this.publicOpinionInformationFn();
    this.customerComprehensiveContributionFn();
  },

  methods: {
    goMore(type) {
      if (type === '提醒事项') {
        // this.$router.push('/home/first')
        // this.$router.push({ path: '/home/first' })
        // this.$router.push({ name: 'home', params: { userId: wise }})
        this.$router.push({ path: '/platform/reminders' });
      }
      if (type === '待办事项') {
        this.$router.push({ path: '/platform/todoList' });
      }
      if (type === '舆情信息') {
        this.$router.push({ path: '/platform/publicOpinionInformation' });
      }
    },
    cooperativeClientsSelect(cycle) {
      this.cooperateCustomerFn(cycle);
    },
    async myCustomerFn(cycle) {
      const res = await myCustomer({ cycle });
      this.cooperativeClients2 = res.data;
    },
    async cooperateCustomerFn(cycle) {
      const res = await cooperateCustomer({ cycle });
      this.cooperativeClients = res.data;
    },
    cooperativeClientsSelect2(cycle) {
      this.myCustomerFn(cycle);
    },

    async getOperatingData() {
      const res = await operatingData();
      this.operatingDataList = res.data;
      this.tyzc = this.operatingDataList.weekInterbankAssets;
      this.tyfz = this.operatingDataList.weekInterbankLiabilities;
    },
    tyChange(val, status) {
      if (status === 'zc') {
        if (val === '1') {
          this.tyzc = this.operatingDataList.weekInterbankAssets;
        }
        if (val === '2') {
          this.tyzc = this.operatingDataList.quarterInterbankAssets;
        }
        if (val === '3') {
          this.tyzc = this.operatingDataList.monthInterbankAssets;
        }
        console.log(this.tyzc, 'this.tyzc');
      }
      if (status === 'fz') {
        if (val === '1') {
          this.tyfz = this.operatingDataList.weekInterbankLiabilities;
        }
        if (val === '2') {
          this.tyfz = this.operatingDataList.quarterInterbankLiabilities;
        }
        if (val === '3') {
          this.tyfz = this.operatingDataList.monthInterbankLiabilities;
        }
      }
    },

    cooperativeClientsSelect2(cycle) {
      this.myCustomerFn(cycle);
    },
    async remindFn() {
      const res = await reminder();
      this.remindList = res.data;
    },
    async todoFn() {
      const res = await todo();
      this.todoList = res.data;
    },
    async publicOpinionInformationFn() {
      const res = await publicOpinionInformation();
      this.publicOpinionInformationList = res.data;
    },
    async customerComprehensiveContributionFn() {
      const res = await customerComprehensiveContribution();
      this.customerComprehensiveContributionList = res.data;
      console.log(res.data, 999);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.item-progress {
  .el-progress-bar {
    .el-progress-bar__outer {
      background-color: rgba(255, 255, 255, 0) !important;
      border-radius: 0;
    }
    .el-progress-bar__inner {
      background-color: rgba(255, 255, 255, 0) !important;
      background: linear-gradient(90deg, #42b5f9 0%, #16e1f1 100%) #39a7f5 !important;
      border-radius: 0;
    }
  }
}

::v-deep.item-progress-one {
  .el-progress-bar {
    .el-progress-bar__outer {
      background-color: rgba(255, 255, 255, 0) !important;
      border-radius: 0;
    }
    .el-progress-bar__inner {
      background-color: rgba(255, 255, 255, 0) !important;
      background: linear-gradient(90deg, #fa635a 0%, #fcaa6e 100%) #ff6a55 !important;
      border-radius: 0;
    }
  }
}
::v-deep.el-radio-group {
  border: none;
  .el-radio-button,
  .el-radio-button--mini {
    .el-radio-button__inner {
      background: #354060;
      border: none;
      color: #959fc5;
      box-shadow: none;
    }
  }

  .is-active {
    .el-radio-button__inner {
      background: #1f9bfd;
      border: none;
      color: #ffffff;
      box-shadow: none;
    }
  }
}
.container {
  display: flex;
  width: 100%;
  height: 100%;
  color: #fff;
  .left {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    .top {
      display: flex;
      height: 430px;
      .top-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: #262d47;
        width: 100%;
        .title {
          height: 40px;
          line-height: 40px;
          padding: 0 16px;
          background: #354060;
          display: flex;
          justify-content: space-between;

          font-size: 14px;
          font-weight: bold;
          color: #ffffff;
        }
        .info-list-one {
          flex: 1;
          padding: 19px 16px;
          display: flex;
          flex-direction: column;
          .info-item:not(:first-child) {
            margin-top: 12px;
          }
          .info-item {
            flex: 1;
            display: flex;
            justify-content: space-between;
            background: #1c2238;
            .info-item-left {
              margin: 11px 18px 6px 18px;
              width: 50%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              .item-title {
                font-size: 14px;
                color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: center;
                .icon {
                  margin-right: 10px;
                  display: inline-block;
                  width: 6px;
                  height: 6px;
                  background: #1f9bfd;
                  box-shadow: 0px 0px 6px 1px #1f9bfd;
                  border-radius: 50%;
                }
              }
              .item-num {
                font-size: 22px;
                font-weight: normal;
                color: #ffffff;
              }
            }
            .info-item-right {
              width: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                width: 7px;
                height: 14px;
                margin-right: 6px;
              }
              .num {
                margin-left: 6px;
                font-size: 14px;
                font-weight: 600;
              }
            }
          }
        }
        .info-list-two {
          flex: 1;
          padding: 19px 16px;
          display: flex;
          flex-direction: column;
          .info-item:not(:first-child) {
            margin-top: 12px;
          }
          .info-item {
            flex: 1;
            background: #1c2238;
            padding: 15px 18px 17px 18px;
            .item-title {
              font-size: 14px;
              color: #ffffff;
              display: flex;
              align-items: center;
              .icon {
                margin-right: 10px;
                display: inline-block;
                width: 6px;
                height: 6px;
                background: #1f9bfd;
                box-shadow: 0px 0px 6px 1px #1f9bfd;
                border-radius: 50%;
              }
            }
            .item-num {
              margin-top: 20px;
              font-size: 22px;
              font-weight: normal;
              color: #ffffff;
            }
          }
        }
        .info-list-three {
          flex: 1;
          padding: 19px 16px;
          display: flex;
          flex-direction: column;
          .info-item:not(:first-child) {
            margin-top: 12px;
          }
          .info-item {
            flex: 1;
            background: #1c2238;
            padding: 15px 18px 17px 18px;
            .item-title {
              font-size: 14px;
              color: #ffffff;
              display: flex;
              align-items: center;
              img {
                width: 20px;
                height: 20px;
                margin-right: 10px;
              }
            }
            .item-num {
              margin-top: 20px;
              font-size: 22px;
              font-weight: normal;
              color: #ffffff;
            }
          }
        }
      }
      .top-item:not(:last-child) {
        margin-right: 16px;
      }
    }
    .bottom {
      margin-top: 18px;
      flex: 1;
      background: #262d47;
      display: flex;
      flex-direction: column;

      .title {
        height: 40px;
        line-height: 40px;
        padding: 0 16px;
        background: #354060;
        display: flex;
        justify-content: space-between;

        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
        .more {
          font-size: 14px;
          font-weight: bold;
          color: #1f9bfd;
        }
      }
      .ranking-list {
        margin: 26px 16px;
        flex: 1;
        display: flex;

        .ranking-list-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
        }
        .ranking-list-content:first-child {
          margin-right: 32px;
        }

        .ranking-list-item {
          height: 48px;
          background: #1c2238;
          border-radius: 1px;
          display: flex;
          justify-content: center;
          align-items: center;
          justify-content: flex-start;
          padding: 0 11px;
          .item-no {
            text-align: center;
            width: 28px;
            height: 24px;
            line-height: 24px;
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            border: 1px solid #39a7f5;
            background: #1c4572;
            border-radius: 2px;
          }
          .item-no-one {
            border: 1px solid #ff6a55;
            background: #5f3740;
          }
          .item-name {
            max-width: 100px;
            font-size: 14px;
            font-weight: 400;
            color: #d6dcff;
            margin-left: 16px;
          }
          .item-progress {
            flex: 1;
            margin: 0 12px;
          }
          .item-num {
            max-width: 80px;
            text-align: right;
            font-size: 16px;
            font-weight: normal;
            color: #ffffff;
          }
        }
      }
    }
  }
  .right {
    margin-left: 16px;
    width: 400px;
    height: 100%;
    display: flex;
    flex-direction: column;
    .right-item {
      flex: 1;
      background: #262d47;
      .title {
        height: 40px;
        line-height: 40px;
        padding: 0 16px;
        background: #354060;
        display: flex;
        justify-content: space-between;

        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
        .more {
          font-size: 14px;
          font-weight: bold;
          color: #1f9bfd;
        }
      }
      .info-list-one {
        flex: 1;
        padding: 19px 16px;
        display: flex;
        flex-direction: column;
        .info-item {
          flex: 1;
          padding: 15px 18px 17px 18px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-bottom: 1px solid #384063;

          .info-item-left {
            flex: 1;
            .item-title {
              font-size: 14px;
              color: #ffffff;
            }
            .item-date {
              margin-top: 10px;
              font-size: 14px;
              color: #d6dcff;
            }
          }
          .info-item-right {
            max-width: 80px;
            font-size: 14px;
            height: 24px;
            line-height: 24px;
            background: #ff6a55;
            border-radius: 16px;
            padding: 0 10px;
          }
        }
      }
      .info-list-two {
        flex: 1;
        padding: 19px 16px;
        display: flex;
        flex-direction: column;
        .info-item {
          flex: 1;
          padding: 15px 18px 17px 18px;
          border-bottom: 1px solid #384063;

          .item-title {
            font-size: 14px;
            color: #ffffff;
          }
          .item-date {
            margin-top: 10px;
            font-size: 14px;
            color: #d6dcff;
          }
        }
      }
    }
    .right-item:not(:last-child) {
      margin-bottom: 16px;
    }
  }
}
</style>
